<template>
  <div id="diagnosticMo">
    <el-dialog
      title="诊断"
      :visible.sync="diagVisible"
      :before-close="handleClose"
      width="80%"
    >
      <el-table
        :data="diagnoseListe"
        sum-text="汇总"
        show-summary
        :summary-method="getSummaries"
        fixed
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column prop="waybill_no" label="运单号" width="150" fiexe>
          <template slot-scope="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="wayClick(scope.row)"
            >
              {{ scope.row.waybill_no }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="customer_id_name" label="所属客户" width="150">
        </el-table-column>
        <el-table-column
          prop="waybill_product_type_name"
          label="承运类型"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="package_type_name"
          label="包装型号"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="total_freight" label="总运费" width="80">
          <template slot-scope="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="freightclick(scope.row, '总费用明细', 0)"
            >
              {{ scope.row.total_freight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="adjust_money" label="调账分摊金额" width="100">
          <template slot-scope="scope">
            <span
              style="color: #44fb3d; cursor: pointer"
              @click="AssessedAmount(scope.row, '调账分摊金额', 0)"
            >
              {{ scope.row.adjust_money }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="total_expense" label="总成本" width="80">
        </el-table-column>
        <el-table-column prop="gross_profit" label="毛利润" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.gross_profit * 1 < 0" style="color: red">
              {{ scope.row.gross_profit }}
            </span>
            <span v-else> {{ scope.row.gross_profit }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="gross_margin" label="毛利率" width="80">
          <template slot-scope="scope">
            <span
              v-if="parseFloat(scope.row.gross_margin) < 0"
              style="color: red"
            >
              {{ scope.row.gross_margin }}
            </span>
            <span v-else> {{ scope.row.gross_margin }} </span>
          </template>
        </el-table-column>
        <el-table-column label="揽收" width="150" align="center">
          <el-table-column
            prop="collect_info.total_expense"
            label="总费用"
            width="80"
          >
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="freightclick(scope.row, '揽收费用明细', 1)"
              >
                {{ scope.row.collect_info.total_expense }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="collect_info.adjust_money" label="调账分摊金额" width="100">
            <template slot-scope="scope">
              <span
                style="color: #44fb3d; cursor: pointer"
                @click="AssessedAmount(scope.row, '揽收调账分摊金额', 1)"
              >
                {{ scope.row.collect_info.adjust_money }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="collect_info.status" label="状态" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.collect_info.status_name}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="干线" width="150" align="center">
          <el-table-column
            prop="dispatch_info.total_expense"
            label="总费用"
            width="80"
          >
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="freightclick(scope.row, '干线费用明细', 2)"
              >
                {{ scope.row.dispatch_info.total_expense }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="dispatch_info.adjust_money" label="调账分摊金额" width="100">
            <template slot-scope="scope">
              <span
                style="color: #44fb3d; cursor: pointer"
                @click="AssessedAmount(scope.row, '干线调账分摊金额', 2)"
              >
                {{ scope.row.dispatch_info.adjust_money }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dispatch_info.status
                        "
            label="状态"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.dispatch_info.status_name }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="配送" width="150" align="center">
          <el-table-column
            prop="distribution_info.total_expense"
            label="总费用"
            width="80"
          >
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="freightclick(scope.row, '配送费用明细', 3)"
              >
                {{ scope.row.distribution_info.total_expense }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="distribution_info.adjust_money" label="调账分摊金额" width="100">
            <template slot-scope="scope">
              <span
                style="color: #44fb3d; cursor: pointer"
                @click="AssessedAmount(scope.row, '配送调账分摊金额', 3)"
              >
                {{ scope.row.distribution_info.adjust_money }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="distribution_info.status"
            label="状态"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.distribution_info.status_name }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="回单" width="150" align="center">
          <el-table-column
            prop="receipt_info.total_expense"
            label="总费用"
            width="80"
          >
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="freightclick(scope.row, '回单费用明细', 4)"
              >
                {{ scope.row.receipt_info.total_expense }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="receipt_info.adjust_money" label="调账分摊金额" width="100">
            <template slot-scope="scope">
              <span
                style="color: #44fb3d; cursor: pointer"
                @click="AssessedAmount(scope.row, '回单调账分摊金额', 4)"
              >
                {{ scope.row.receipt_info.adjust_money }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="receipt_info.status" label="状态" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.receipt_info.status_name }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="回箱" width="150" align="center">
          <el-table-column
            prop="box_recycle_info.total_expense"
            label="总费用"
            width="80"
          >
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="freightclick(scope.row, '回箱费用明细', 5)"
              >
                {{ scope.row.box_recycle_info.total_expense }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="box_recycle_info.adjust_money" label="调账分摊金额" width="100">
            <template slot-scope="scope">
              <span
                style="color: #44fb3d; cursor: pointer"
                @click="AssessedAmount(scope.row, '回箱调账分摊金额', 5)"
              >
                {{ scope.row.box_recycle_info.adjust_money }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="box_recycle_info.status"
            label="状态"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.box_recycle_info.status_name }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-dialog
        width="60%"
        :title="innerText"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div v-if="innerType == 0">
          <el-table :data="updatedData" style="width: 100%">
            <el-table-column prop="key_1" label="运费" width="180">
            </el-table-column>
            <el-table-column prop="key_4" label="送货费" width="180">
            </el-table-column>
            <el-table-column prop="key_5" label="提货费" width="180">
            </el-table-column>
            <el-table-column prop="key_6" label="装卸费" width="180">
            </el-table-column>
            <el-table-column prop="key_8" label="保价费" width="180">
            </el-table-column>
            <el-table-column prop="key_9" label="包装费" width="180">
            </el-table-column>
            <el-table-column prop="key_10" label="其他费用" width="180">
            </el-table-column>
            <el-table-column prop="adjust_reason" label="原因" width="180">
            </el-table-column>
          </el-table>
        </div>
        <div v-if="innerType == 1">
          <el-table :data="innerList" style="width: 100%">
            <el-table-column prop="collect_money" label="提货费" width="180">
            </el-table-column>
            <el-table-column prop="delivery_money" label="发货费" width="180">
            </el-table-column>
            <el-table-column prop="handling_money" label="装卸费">
            </el-table-column>
            <el-table-column prop="package_money" label="包装费">
            </el-table-column>
              <el-table-column
              prop="airport_pick_money"
              label="揽收机场提货费"
              width="180"
            >
            </el-table-column>
            <el-table-column
            prop="dry_ice_money"
            label="揽收干冰费"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="adjust_reason" label="原因" width="180">
          </el-table-column>
          </el-table>
        </div>
        <div v-if="innerType == 2">
          <el-table :data="innerList" style="width: 100%">
            <el-table-column prop="expense" label="干线费" width="180">
            </el-table-column>
            <el-table-column prop="adjust_reason" label="原因" width="180">
            </el-table-column>
          </el-table>
        </div>
        <div v-if="innerType == 3">
          <el-table :data="innerList" style="width: 100%">
            <el-table-column prop="delivery_fee" label="配送费" width="180">
            </el-table-column>
            <el-table-column
              prop="extra_distribution_fee"
              label="配送里程费"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="second_distribution_fee" label="二次配送费">
            </el-table-column>
            <el-table-column prop="waiting_fee" label="配送专车费">
            </el-table-column>
            <el-table-column prop="airport_pick_fee" label="机场提货费">
            </el-table-column>
            <el-table-column prop="dry_ice_fee" label="干冰费">
            </el-table-column>
            <el-table-column prop="return_box_money" label="返箱费">
            </el-table-column>
            <el-table-column prop="airport_operate_fee" label="机场操作费">
            </el-table-column>
            <el-table-column prop="transfer_fee" label="中转费">
            </el-table-column>
            <el-table-column prop="adjust_reason" label="原因" width="180">
            </el-table-column>
          </el-table>
        </div>
        <div v-if="innerType == 4">
          <el-table :data="innerList" style="width: 100%">
            <el-table-column
              prop="return_receipt_fee"
              label="回单费用"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="adjust_reason" label="原因" width="180">
            </el-table-column>
          </el-table>
        </div>
        <div v-if="innerType == 5">
          <el-table :data="innerList" style="width: 100%">
            <el-table-column prop="return_box_fee" label="回箱费用" width="180">
            </el-table-column>
            <el-table-column prop="adjust_reason" label="原因" width="180">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="derivedDataFoot()">导出</el-button>
      </div>
    </el-dialog>
             <!-- 调账分摊金额 -->
             <div>
              <el-dialog
              width="60%"
              :title="innerTextamount"
              :visible.sync="innerVisibleamount"
              append-to-body
              >
              <div v-if="innerTypeDatalist.length > 0 ">
                <div v-for="(itme,index) in innerTypeDatalist" style="margin: 0px 0px 10px 0px;">
                  <el-tag >{{itme}}</el-tag>
                 </div>
              </div>
              <div v-else>
                <el-tag >暂无调账分摊金额</el-tag>
              </div>
            </el-dialog>
            </div>
  </div>
</template>
<script>
import {
  finance_customer_diagnosis,
  finance_customer_diagnosis_export,
} from "@/api/paymentrequest";
import { finance_customer_diagnosis_detail , customer_diagnosis_reason} from "@/api/paymentrequest";
export default {
  props: ["diagVisible", "reimburse_apply_id"],
  data() {
    return {
      outerVisible: true,
      innerVisible: false,
      innerText: "",
      innerType: "",
      updatedData: [], //总运费
      tableHeight: "", //高度
      innerList: [],
      expense_list: "",
      diagnoseListe: [],
      innerTextamount:"调账分摊金额",
      innerVisibleamount:false,
      innerTypeamount:"",
      innerTypeDatalist:[]
    };
  },
  filters: {
    afterTime(value) {
      switch (value) {
        case "0":
          return "未对账";
        case "1":
          return "部分对账";
        case "2":
          return "已对账";
      }
    },
  },
  mounted() {
    this.diagnose();
  },
  methods: {
    diagnose() {
      // console.log("数据调用")
      var param = {
        type: 1 + "",
        reimburse_apply_id: this.reimburse_apply_id + "",
      };
      finance_customer_diagnosis(param).then((res) => {
        this.diagnoseListe = res.data || [];
        // console.log(this.diagnoseListe, "diagnoseListe")
        if (this.diagnoseListe.length > 5) {
          this.tableHeight = "450px";
        } else {
          this.tableHeight = "";
        }
      });
    },
    handleClose() {
      this.$emit("diagVisiblefalse");
    },
    //导出功能
    derivedDataFoot() {
      var param = {
        type: 1 + "",
        reimburse_apply_id: this.reimburse_apply_id + "",
      };
      finance_customer_diagnosis_export(param).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    // 跳到运单详情
    wayClick(value) {
      var id = value.waybill_id;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    freightclick(value, text, type) {
      // type 1揽收 2干线 3配送 4回单 5回箱
      this.innerVisible = true;
      this.innerText = text;
      this.innerType = type;
      var param = {
        waybill_id: value.waybill_id,
        node_type: type + "", // 1揽收 2干线 3配送 4回单 5回箱
      };
      finance_customer_diagnosis_detail(param).then((res) => {
        if (type != 0) {
          this.innerList = res.data;
        } else {
          this.updatedData = res.data.map((item) => {
            this.expense_list = {
              key_1: item["1"] == undefined ? 0 : item["1"],
              key_4: item["4"] == undefined ? 0 : item["4"],
              key_5: item["5"] == undefined ? 0 : item["5"],
              key_6: item["6"] == undefined ? 0 : item["6"],
              key_8: item["8"] == undefined ? 0 : item["8"],
              key_9: item["9"] == undefined ? 0 : item["9"],
              key_10: item["10"] == undefined ? 0 : item["10"],
              adjust_reason:item.adjust_reason
            };
            return {
              ...this.expense_list,
            };
          });
        }
      });
    },
    AssessedAmount(value, text, type) {
         // type 1揽收 2干线 3配送 4回单 5回箱
      this.innerVisibleamount = true;
      this.innerTextamount = text;
      this.innerTypeamount = type;
      var param = {
        waybill_id: value.waybill_id,
        node_type: type + "", // 1揽收 2干线 3配送 4回单 5回箱
      };
      customer_diagnosis_reason(param).then((res) => {
        this.innerTypeDatalist = res.data
        console.log(res,"resdfads")
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = {};
      columns.forEach((column) => {
        sums[column.property] = 0;
      });
      var all_margin = 0;
      var all_freight = 0;
      var ctotal_expense_data = 0;
      var ctotal_freight_data = 0;
      var total_expense_data_all = 0;
      var gross_profit_data_all = 0;
      var dtotal_expense_data = 0;
      var bution_expense_data = 0;
      var box_expense_data = 0;
      var rec_expense_data = 0;
      data.forEach((item) => {
        columns.forEach((column, index) => {
          if (column.property in sums) {
            if (column.property === "collect_info.total_expense") {
              // sums[column.property] += this.checkAndParseValue(item.collect_info.total_expense);
              ctotal_expense_data += this.checkAndParseValue(
                item.collect_info.total_expense
              );
              sums[column.property] = ctotal_expense_data.toFixed(2);
            } else if (column.property === "total_freight") {
              // sums[column.property] += parseFloat(item.total_freight);
              ctotal_freight_data += parseFloat(item.total_freight);
              sums[column.property] = ctotal_freight_data.toFixed(2);
            } else if (column.property === "gross_margin") {
              all_margin += parseFloat(item.gross_profit);
              all_freight += parseFloat(item.total_freight);
              if (all_margin && all_freight) {
                sums[column.property] =
                  ((all_margin / all_freight) * 100).toFixed(2) + "%";
              }
            } else if (column.property === "total_expense") {
              // sums[column.property] += parseFloat(item.total_expense);
              total_expense_data_all += parseFloat(item.total_expense);
              sums[column.property] = total_expense_data_all.toFixed(2);
            } else if (column.property === "gross_profit") {
              // sums[column.property] += parseFloat(item.gross_profit);
              gross_profit_data_all += parseFloat(item.gross_profit);
              sums[column.property] = gross_profit_data_all.toFixed(2);
            } else if (column.property === "dispatch_info.total_expense") {
              // sums[column.property] += this.checkAndParseValue(item.dispatch_info.total_expense);
              dtotal_expense_data += this.checkAndParseValue(
                item.dispatch_info.total_expense
              );
              sums[column.property] = dtotal_expense_data.toFixed(2);
            } else if (column.property === "distribution_info.total_expense") {
              // sums[column.property] += this.checkAndParseValue(item.distribution_info.total_expense);
              bution_expense_data += this.checkAndParseValue(
                item.distribution_info.total_expense
              );
              sums[column.property] = bution_expense_data.toFixed(2);
            } else if (column.property === "box_recycle_info.total_expense") {
              // sums[column.property] += this.checkAndParseValue(item.box_recycle_info.total_expense);
              box_expense_data += this.checkAndParseValue(
                item.box_recycle_info.total_expense
              );
              sums[column.property] = box_expense_data.toFixed(2);
            } else if (column.property === "receipt_info.total_expense") {
              // sums[column.property] += this.checkAndParseValue(item.receipt_info.total_expense);
              rec_expense_data += this.checkAndParseValue(
                item.receipt_info.total_expense
              );
              sums[column.property] = rec_expense_data.toFixed(2);
            } else {
              sums[column.property] = "";
            }
          } else {
          }
          // if (index === 0) {
          //     sums[index] = '汇总';
          // }
        });
      });
      sums["waybill_no"] = "汇总";
      return Object.keys(sums).map((key) => {
        return sums[key];
      });
    },
    checkAndParseValue(value) {
      const parsedValue = parseFloat(value);
      return isNaN(parsedValue) ? 0 : parsedValue;
    },
  },
};
</script>
<style scoped lang="less">
</style>